<ul
  class="devui-nav devui-nav-{{ type }} {{ cssClass }}"
  [ngClass]="{
    'devui-nav-stacked': vertical
  }"
  role="tablist"
  [id]="id"
  #tabsEle
>
  <ng-container *ngFor="let tab of tabs">
    <li
      role="presentation"
      [class.disabled]="tab.disabled"
      [id]="tab.tabId === undefined ? '' : tab.tabId"
      [class.active]="tab.id == activeTab"
      (click)="select(tab.id)"
    >
      <a
        role="tab"
        data-toggle="tab"
        [attr.aria-expanded]="tab.id == activeTab"
        [style.width]="customWidth"
        [ngClass]="{ 'custom-width': customWidth }"
      >
        <ng-template *ngIf="!tab.title" [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>
        <span *ngIf="tab.title">{{ tab.title }}</span>
      </a>
    </li>
  </ng-container>
  <div class="devui-nav-{{ type }}-animation" [style.left]="offsetLeft + 'px'" [style.width]="offsetWidth + 'px'"></div>
</ul>
<div class="devui-tab-content" *ngIf="showContent">
  <ng-container *ngFor="let tab of tabs">
    <div class="devui-tab-pane fade in" role="tabpanel" *ngIf="tab.id == activeTab" [ngClass]="{ 'in active': tab.id == activeTab }">
      <ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template>
    </div>
  </ng-container>
</div>
